<template>
	<view>
		<!-- <view class="wrap">
			<u-row class="u-row" v-for="(item,index) in dataList" :key="index" gutter="16" justify="space-between">
				<u-col span="4">
					<view :class="item.leftVo.pClass"> {{item.leftVo.positionNumber}}</view>
				</u-col >
				<u-col span="4"  offset="4">
					<view :class="item.rightVo.pClass">{{item.rightVo.positionNumber}}</view>
				</u-col>
			</u-row>
		</view> -->
		<u-card padding="16">
			<view class="" slot="head">
				<view class="wrap">
					<u-row >
						<u-col span="12" >
							<view class="weikaishi6">
								<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#000000" label="拣货单" color="#000000"></u-icon>：{{storageNumber}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="12" >
							<view class="weikaishi6">
								<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#000000" label="关联单号" color="#000000"></u-icon>：{{associationOrder}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="12" >
							<view class="weikaishi6">
								<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#000000" label="AGV" color="#000000"></u-icon>：{{agvNo}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="12" >
							<view class="weikaishi6">
								<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#000000" label="拣货人" color="#000000"></u-icon>：{{storageUserName}}</span>
							</view>
						</u-col>
					</u-row>

					<u-row >
						<u-row >
							<u-col span="12">
								<view class="weikaishi3">
									<span><u-icon name="home" size="29" labelSize="14px" labelColor="#000000" label="拣货库位"></u-icon>：{{goodsInfo.positionNumber}}</span>
								</view>
							</u-col>
						</u-row>
						<u-col span="12">
							<view class="weikaishi3">
								<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#000000" label="商品名称" color="#000000"></u-icon>：{{goodsInfo.goodsName}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="12" >
							<view class="weikaishi6">
								<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#000000" label="商品编号" color="#000000"></u-icon>：{{goodsInfo.goodsNumber}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="12" >
							<view class="weikaishi6">
								<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#000000" label="拣货数量" color="#000000"></u-icon>：{{goodsInfo.num}} {{goodsInfo.unit}}</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-card>
		<view class="wrap">
			<u-row class="u-row" gutter="16" justify="space-between">
				<u-col span="12">
					<u-button type="success" @click="bindUser()">绑定拣货员</u-button>
				</u-col >
			</u-row>
			<u-row class="u-row" v-if="goodsInfo.stat == '00'" gutter="16" justify="space-between">
				<u-col span="12">
					<u-button type="success" @click="storageStart()">呼叫小车</u-button>
				</u-col >
			</u-row>
			
			<u-row class="u-row" v-if="goodsInfo.stat == '00'" gutter="16" justify="space-between">
				<u-col span="12">
					<u-button type="success" @click="agvStorageFirst()">开始拣货</u-button>
				</u-col >
			</u-row>
			
			<u-row class="u-row" gutter="16" v-if="goodsInfo.stat == '10'" justify="space-between">
				<u-col span="12" >
					<u-button type="primary" @click="agvStorageNext()">下一任务</u-button>
				</u-col >
			</u-row>
			<u-row class="u-row" gutter="16" v-if="goodsInfo.stat == '20'" justify="space-between">
				<u-col span="12">
					<u-button type="success" @click="agvStorageToWay()">送达巷道</u-button>
				</u-col >
			</u-row>
		</view>

		<u-popup v-model="jhUsershow" mode="center" closeable width="610rpx" height="350rpx" border-radius="10">
			<scan></scan>
			<scanner></scanner>
			<sm></sm>
			<honeywell></honeywell>
			<view class="u-text-center u-m-t-20 weikaishi3">绑定拣货员</view>
			<view class=" u-m-20">
				<u-row>
					<u-col span="3" text-align="center">
						<view class="u-m-t-10">
							<span>拣货员:</span>
						</view>
					</u-col>
					<u-col span="8" text-align="center">
						<view class="">
							<u-input v-model="jhUser" type="text" :border="true" placeholder="请输入拣货员" />
						</view>
					</u-col>
					<u-col span="1" text-align="center" style="display: flex; align-items: center;" @click="scan">
						<u-icon name="scan" color="#2b85e4" size="43" style="font-size: 80px;">手机扫描</u-icon>
					</u-col>
				</u-row>
			</view>
			<view style="height: 80rpx">
				<view class="close-btn u-m-t-40">
					<u-button size="medium" @click="queding()">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import scan from "@/components/uni-scan/scan.vue"
	import scanner from "@/components/uni-scan/scanner.vue"
	import sm from "@/components/uni-scan/sm.vue"
	import honeywell from "@/components/uni-scan/honeywell.vue"

	export default {
		components: {
			scanner,
			scan,
			sm,
			honeywell
		},
		data() {
			return {
				sid: '',
				agvNo:'',
				jhUsershow: false ,
				storageUserName:'',
				jhUser: '',
				storageNumber:'',
				associationOrder:'',
				dataList:[],
				goodsInfo:{}
			}
		},
		onLoad(open) {
			//#ifdef H5 || APP-PLUS
			this.flex = 'u-flex'
			//#endif
			this.sid = open.id;
			this.getDataList();
		},
		onPullDownRefresh() {
			this.getDataList();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},onShow() {
			uni.$off('scan');
			uni.$on('scan', (res) => {
				console.log('扫码结果：', res.codeStr);
				this.jhUser = res.codeStr;
			});
			uni.$off('scanner') // 每次进来先 移除全局自定义事件监听器
			uni.$on('scanner', (res) => {
				console.log('扫码结果：', res.code);
				this.jhUser = res.code;
			});
			uni.$off('sm') // 每次进来先 移除全局自定义事件监听器
			uni.$on('sm', (res) => {
				console.log('扫码结果：', res.code);
				this.jhUser = res.code;
			});
			uni.$off('honeywell') // 每次进来先 移除全局自定义事件监听器
			uni.$on('honeywell', (res) => {
				console.log('扫码结果：', res.code);
				this.jhUser = res.code;
			});
		},
		methods: {
			scan() {
				uni.scanCode({
					success: (res) => {
						this.jhUser = res.result;
					}
				});
			},
			bindUser(){
				this.jhUsershow = true;
				this.jhUser = '';
			},
			getDataList() {
				//根据当前拣货订单获取拣货任务，并初始化拣选位置
				this.$http.post('/rest/HxStorageOut/agvGetPosition', {}, {
					params: {
						storageOutId: this.sid,
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.agvNo = res.data.data.agvNo;
						this.storageNumber = res.data.data.storageNumber;
						this.associationOrder = res.data.data.associationOrder;
						this.storageUserName = res.data.data.storageUserName;
						// this.dataList = res.data.data.dataList;
						this.goodsInfo = res.data.data.goodsInfo;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 2000
						});
					}
				})
			},
			queding(){
				uni.showLoading({
					title: '加载中'
				})
				//根据当前拣货订单获取拣货任务，并初始化拣选位置
				this.$http.post('/rest/HxStorageOut/agvJhUser', {}, {
					params: {
						agvStorageTaskId: this.goodsInfo.storageTaskId,
						jhUser: this.jhUser,
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '操作成功',
							duration: 2000
						});
					this.jhUsershow = false;
					this.getDataList();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 2000
						});
					}
				})
			},
			storageStart() {
				uni.showLoading({
					title: '加载中'
				})
				//根据当前拣货订单获取拣货任务，并初始化拣选位置
				this.$http.post('/rest/HxStorageOut/agvStorageStart', {}, {
					params: {
						agvStorageTaskDetailId: this.goodsInfo.id,
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						this.goodsInfo.stat = res.data.data.stat;
						uni.showToast({
							icon: 'none',
							title: '操作成功',
							duration: 2000
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 2000
						});
					}
				})
			},
			agvStorageFirst() {
				uni.showLoading({
					title: '加载中'
				})
				//根据当前拣货订单获取拣货任务，并初始化拣选位置
				this.$http.post('/rest/HxStorageOut/agvStorageFirst', {}, {
					params: {
						agvStorageTaskDetailId: this.goodsInfo.id,
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						this.goodsInfo.stat = res.data.data.stat;
						uni.showToast({
							icon: 'none',
							title: '操作成功',
							duration: 2000
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 2000
						});
					}
				})
			},
			agvStorageNext() {
				uni.showLoading({
					title: '加载中'
				})
				//根据当前拣货订单获取拣货任务，并初始化拣选位置
				this.$http.post('/rest/HxStorageOut/agvStorageNext', {}, {
					params: {
						id: this.goodsInfo.id,
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						this.getDataList();
						uni.showToast({
							icon: 'none',
							title: '操作成功',
							duration: 3000
						});
					}else if (res.data.code == 666) {
						this.getDataList();
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 3000
						});
					}else {
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 3000
						});
					}
				})
			},
			agvStorageJump() {
				uni.showLoading({
					title: '加载中'
				})
				//根据当前拣货订单获取拣货任务，并初始化拣选位置
				this.$http.post('/rest/HxStorageOut/agvStorageJump', {}, {
					params: {
						id: this.goodsInfo.id,
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						this.getDataList();
						uni.showToast({
							icon: 'none',
							title: '操作成功',
							duration: 3000
						});
					}else if (res.data.code == 666) {
						this.getDataList();
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 3000
						});
					}else {
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 3000
						});
					}
				})
			},
			agvStorageToWay() {
				uni.showLoading({
					title: '加载中'
				})
				//根据当前拣货订单获取拣货任务，并初始化拣选位置
				this.$http.post('/rest/HxStorageOut/agvStorageToWay', {}, {
					params: {
						agvStorageTaskId: this.goodsInfo.storageTaskId,
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '操作成功',
							duration: 3000
						});
						this.$Router.back();
					}else {
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 3000
						});
					}
				})
			}
		}	
	}
</script>

<style lang="scss">
		.wrap {
			border: 2px solid #d3dce6;
			padding: 10rpx;
		}
		
		.u-row {
			padding-top: 20rpx ;
		}

		.u-col {
			padding-top: 20rpx ;
		}
	
	
		.demo-layout {
			display: flex;        /* 使用Flexbox布局 */
			justify-content: center; /* 水平居中 */
			align-items: center;     /* 垂直居中 */
			border: 1px solid #000; /* 边框，仅为了清晰地展示居中效果  */
			height: 60rpx;
		}
	
		.bg-purple {
			background: #d3dce6;
		}
	
		.bg-purple-light {
			background: #e5e9f2;
		}
	
		.bg-purple-dark {
			background: #99a9bf;
		}
		
		.bg-purple-bule {
			color: white;
			background: blue;
		}
</style>